<!DOCTYPE html>
<html>

<head>
    <title>Leaflet.LayerGroup</title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>

    <!-- 引入L.Path.DashFlow插件 -->
    <script src="../lib/leaflet/plugins/leaflet.ShowHideLayerGroup.js"></script>

    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }

        .menuBar {
            position: relative;
            text-align: center;
            top: 10px;
            margin: 0 50px;
            padding: 5px;
            border-radius: 3px;
            z-index: 999;
            color: #ffffff;
            background-color: rgba(0, 168, 0, 1);
        }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <div class="menuBar">
        <input type="button" value="显示" onclick="showLayer()" />
        <input type="button" value="隐藏" onclick="hideLayer()" />
    </div>
</body>

<script>
    // 初始化地图
    var map = L.map('map', {
        center: [39.905963, 116.320813],
        zoom: 12,
        preferCanvas: true // 使用canvas模式渲染矢量图形 
    });
    // 添加底图
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    var myLayerGroup = L.layerGroup().addTo(map)
    addPoint()
    addPolyline()
    addPolygon()

    // 图层显示
    function showLayer() {
        myLayerGroup.showLayer()
    }

    // 图层隐藏
    function hideLayer() {
        myLayerGroup.hideLayer()
    }

    //添加点
    function addPoint() {
        for (var i = 0; i < 200; i++) {
            var lat = 39.905963 + (Math.random() - Math.random()) * 0.1;
            var lng = 116.340813 + (Math.random() - Math.random()) * 0.2;
            var marker = L.marker([lat, lng],{
                opacity: 0.7
            });
            myLayerGroup.addLayer(marker);
        }
        for (var i = 0; i < 500; i++) {
            var lat = 39.905963 + (Math.random() - Math.random()) * 0.1;
            var lng = 116.340813 + (Math.random() - Math.random()) * 0.2;
            var circleMarker = L.circleMarker([lat, lng]);
            myLayerGroup.addLayer(circleMarker);
        }
    };

    // 添加线
    function addPolyline() {
        var polyline = L.polyline([
            [39.83, 116.34],
            [39.93, 116.39],
            [39.93, 116.32]
        ], {
            color: 'red'
        });
        myLayerGroup.addLayer(polyline)
    };

    // 添加面
    function addPolygon() {
        var polygon = L.polygon([
            [39.83, 116.24],
            [39.93, 116.29],
            [39.93, 116.22]
        ], {
            color: 'red',
            fillOpacity: 0.3
        });
        myLayerGroup.addLayer(polygon)
    };
</script>

</html>